<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 分类</title>
    <style type="text/css">
        /*  css 样式 把块级元素显示为内联元素 */
        p.inline{
            display: inline;
        }
        div.none{
            display: none;
            background-color: #8235bd;
        }
        /* 把元素显示为 块级元素 */
        span.block{
            display: block;  /*  */
        }

        /* float 属性的简单使用 */
        img.floatRight{
            float: right;
        }

        /* 向右浮动带边框和外边距*/
        img.floatRightBorder
        {
            float:right;
            border:1px dotted black;
            margin:0px 0px 15px 20px;
        }

        div.floatRightMargin{
            float: right;
            width: 120px;
            margin: 0 0 15px 20px;
            padding: 15px;
            border: 1px solid #ff00ff;
            text-align: center;
        }

        /* 首字母大写  */
        span.letterBig{
            float: left;
            width: 0.7em;
            font-size: 400%;
            font-family: algerian,Courier;
            line-height: 80%;
        }

        div.container
        {
            width:100%;
            margin:0px;
            border:1px solid gray;
            line-height:150%;
        }
        div.header,div.footer
        {
            padding:0.5em;
            color:white;
            background-color:gray;
            clear:left;
        }
        h1.header
        {
            padding:0;
            margin:0;
            /*margin-left: 190px;*/
        }
        div.left
        {
            float:left;
            width:160px;
            margin:0;
            padding:1em;
            background-color: #8235bd;
        }
        div.content
        {
            margin-left:190px;
            border-left:1px solid gray;
            padding:1em;
        }

        /*   分类中的固定定位 */
        p.fixOne{
            position: fixed;
            left: 5px;
            top:5px;
            background-color: #00FF00;  /*  设置不同背景色 */
        }

        p.fixTwo{
            position: fixed;
            left: 5px;
            top: 30px;
            background-color: #00FF00;
        }
        /*表格元素中的 collapse 非 IE浏览器支持 其实并不建议使用  */
        tr.coll{
            visibility: collapse;  /*  collapse 本来就是倒塌的意思 */
        }

        /*  我们对比 visible 属性 */
        h1.visible{
            visibility: visible;
        }

        h1.invisible{
            visibility: hidden;   /*  将元素隐藏 */
        }

        /*  清除 两边 的显示 */
        img.clearBoth{
            float: left;
            clear: both;
        }

    </style>
</head>
<body>
    <!-- 如何把元素显示为内联元素 -->
    <p class="inline">inline P 元素</p>
    <p class="inline">inline P 元素</p>
    <div class="none">diplay:none 的div </div>  <!--  显示 为none 后啥也没显示 -->
    <!--  把内联元素显示为 block 虽然不推荐这么使用 -->
    <span class="block">本例中的样式表把 span 元素设置为块级元素。</span>
    <span class="block">两个 span 元素之间产生了一个换行行为</span>

    <!-- float 属性的简单应用 -->
    <p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
    <p>
        <img src="../images/eg_venus.gif"  class="floatRight" align="top"/>  <!--  设置  img 的align 和 设置float 还是有区别 -->
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>

    <p>
        <img src="../images/eg_venus.gif"  class="floatRightBorder"/>  <!--  设置  img 的align 和 设置float 还是有区别 -->
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>
    <div class="floatRightMargin">
        <img src="../images/eg_venus.gif" /><br />
        CSS is fun!
    </div>
    <p>
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>
    <!--  测试  一下 收个字母大写 的样式 -->
    <div class="container">

        <div class="header"><h1 class="header">W3School.com.cn</h1></div>

        <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>

        <div class="content">
            <h2>Free Web Building Tutorials</h2>
            <p>At W3School.com.cn you will find all the Web-building tutorials you need,
                from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
            <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>

        <div class="footer">Copyright 2008 by YingKe Investment.</div>
    </div>

    <!--  fixed 的文件流  和正常的还是不同 脱离了正常的文档流  -->
    <p class="fixOne">这是第一段fixed的文本</p>
    <p class="fixTwo">这是第二段fixed的文本</p>
    <p>是否会对正常的布局产生影响  确实产生了影响</p>

    <table border="1">
        <tr>
            <td>Adams</td>
            <td>John</td>
        </tr>
        <tr class="coll">  <!--  如果这个css 是合并这个 tr 那放出来的意义在哪?  什么情况下使用?  -->
            <td>Bush</td>
            <td>George</td>
        </tr>
        <tr>
           <td>Kobe</td>
           <td>Bryent</td>
        </tr>
    </table>

    <!-- 测试一下 h1 元素 -->
    <h1 class="visible">这是可见的标题</h1>
    <h1 class="invisible">这是不可见的标题</h1>

    <!--  这些自带的效果 也挺好的 -->
    <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
    <span style="cursor:auto">Auto</span><br />
    <span style="cursor:crosshair">Crosshair</span><br />
    <span style="cursor:default">Default</span><br />
    <span style="cursor:pointer">Pointer</span><br />
    <span style="cursor:move">Move</span><br />
    <span style="cursor:e-resize">e-resize</span><br />
    <span style="cursor:ne-resize">ne-resize</span><br />
    <span style="cursor:nw-resize">nw-resize</span><br />
    <span style="cursor:n-resize">n-resize</span><br />
    <span style="cursor:se-resize">se-resize</span><br />
    <span style="cursor:sw-resize">sw-resize</span><br />
    <span style="cursor:s-resize">s-resize</span><br />
    <span style="cursor:w-resize">w-resize</span><br />
    <span style="cursor:text">text</span><br />
    <span style="cursor:wait">wait</span><br />
    <span style="cursor:help">help</span>
    <!--  清除两边的浮动 -->

    <img src="../images/eg_venus.gif" class="clearBoth"/>
    <img src="../images/eg_venus.gif" class="clearBoth"/>


</body>
</html>